<template>
	<view class="login-container">
		<view class="login-header">
			<text class="app-title">备忘录</text>
		</view>

		<view class="login-form">
			<!-- 邮箱输入 -->
			<view class="form-item">
				<view class="input-wrapper">
					<text class="input-icon"></text>
					<input 
						class="input-field" 
						type="text" 
						v-model="email" 
						placeholder="请输入邮箱"
					/>
				</view>
			</view>

			<!-- 密码输入 -->
			<view class="form-item">
				<view class="input-wrapper">
					<text class="input-icon"></text>
					<input 
						class="input-field" 
						type="password" 
						v-model="password" 
						placeholder="请输入密码"
					/>
				</view>
			</view>

			<!-- 登录/注册按钮 -->
			<button class="login-btn" @click="handleLogin">
				{{ isRegister ? '注册' : '登录' }}
			</button>

			<!-- 切换注册/登录 -->
			<view class="switch-mode">
				<text class="switch-text" @click="toggleMode">
					{{ isRegister ? '已有账号？去登录' : '没有账号？去注册' }}
				</text>
			</view>
		</view>

		<!-- 装饰性元素 -->
		<!-- 简约风格：不需要装饰性圆圈 -->
	</view>
</template>

<script>
	import { authAPI } from '@/utils/api.js';
	
	export default {
		data() {
			return {
				email: '',
				password: '',
				isRegister: false
			};
		},
		onLoad() {
			// 检查是否已登录
			this.checkLogin();
		},
		methods: {
		// 检查登录状态
		checkLogin() {
			try {
				const token = uni.getStorageSync('token');
				if (token) {
					// 已登录，跳转到首页（tabBar页面使用switchTab）
					uni.switchTab({
						url: '/pages/app-tabber/home'
					});
				}
			} catch (e) {
				console.log('检查登录状态失败', e);
			}
		},			// 处理登录/注册
			handleLogin() {
				// 验证邮箱
				if (!this.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return;
				}

				// 简单的邮箱格式验证
				const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if (!emailReg.test(this.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					});
					return;
				}

				// 验证密码
				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}

				if (this.password.length < 6) {
					uni.showToast({
						title: '密码至少6位',
						icon: 'none'
					});
					return;
				}

				if (this.isRegister) {
					// 注册逻辑
					this.register();
				} else {
					// 登录逻辑
					this.login();
				}
			},

			// 注册
			async register() {
				try {
					uni.showLoading({
						title: '注册中...'
					});
					
					const res = await authAPI.register({
						email: this.email,
						password: this.password
					});
					
					uni.hideLoading();
					
					if (res.code === 200) {
						// 保存 token 和用户信息
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('userInfo', JSON.stringify(res.data));
						
						uni.showToast({
							title: '注册成功',
							icon: 'success',
							duration: 1500
						});
						
						// 跳转到首页（tabBar页面使用switchTab）
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/app-tabber/home'
							});
						}, 1500);
					}
				} catch (error) {
					uni.hideLoading();
					console.error('注册失败:', error);
					uni.showToast({
						title: error.message || '注册失败，请重试',
						icon: 'none',
						duration: 2000
					});
				}
			},

			// 登录
			async login() {
				try {
					uni.showLoading({
						title: '登录中...'
					});
					
					const res = await authAPI.login({
						email: this.email,
						password: this.password
					});
					
					uni.hideLoading();
					
					if (res.code === 200) {
						// 保存 token 和用户信息
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('userInfo', JSON.stringify(res.data));
						
						uni.showToast({
							title: '登录成功',
							icon: 'success',
							duration: 1500
						});
						
						// 跳转到首页（tabBar页面使用switchTab）
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/app-tabber/home'
							});
						}, 1500);
					}
				} catch (error) {
					uni.hideLoading();
					console.error('登录失败:', error);
					uni.showToast({
						title: error.message || '登录失败，请重试',
						icon: 'none',
						duration: 2000
					});
				}
			},

			// 切换注册/登录模式
			toggleMode() {
				this.isRegister = !this.isRegister;
				this.email = '';
				this.password = '';
			}
		}
	}
</script>

<style scoped>
	.login-container {
        min-height: 100vh;
        background-color: #f8f9fa;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30rpx;
        padding-top: 33vh;
    }

	/* 头部 */
	.login-header {
		margin-bottom: 20rpx;
		text-align: center;
	}

	.app-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #333;
		display: block;
		margin-bottom: 6rpx;
	}

	.app-subtitle {
		font-size: 20rpx;
		color: #888;
	}

	/* 表单 卡片 */
	.login-form {
		width: 100%;
		max-width: 680rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.06);
		z-index: 1;
	}

	.form-item {
		margin-bottom: 18rpx;
	}

	.input-wrapper {
		display: flex;
		align-items: center;
		background-color: #f7f7f7;
		border-radius: 8rpx;
		padding: 0 14rpx;
		height: 70rpx;
	}

	.input-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
	}

	.input-field {
		flex: 1;
		font-size: 26rpx;
		color: #333;
		border: none;
		background-color: transparent;
	}

	.send-code-btn {
		background: transparent;
		border: none;
		color: #007aff;
		font-size: 24rpx;
		padding: 0 6rpx;
		min-width: 100rpx;
		text-align: right;
	}

	.send-code-btn[disabled] {
		color: #bbb;
	}

	/* 登录按钮 */
	.login-btn {
		width: 100%;
		height: 72rpx;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: 600;
		margin-top: 18rpx;
	}

	/* 切换模式 */
	.switch-mode {
		text-align: center;
		margin-top: 16rpx;
	}

	.switch-text {
		color: #007aff;
		font-size: 24rpx;
	}
</style>
